const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common')

const devConfig = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	devServer: {
		hotOnly: true,
		contentBase: 'public',
		overlay: {
			warnings: false,
			errors: true,
		},
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				use: 'vue-loader',
			},
			{
				test: /\.(vue|js)$/,
				enforce: 'pre',
				exclude: /node_modules/,
				use: 'eslint-loader',
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: 'babel-loader',
			},
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.less$/,
				use: ['style-loader', 'css-loader', 'less-loader'],
			},
			{
				test: /\.(jpe?g|png|gif)$/,
				use: {
					loader: 'url-loader',
					options: {
						esModule: false, // 默认按es module打包, 导致前端加载不出图片
						limit: 2 * 1024,
					},
				},
			},
			{
				test: /\.(ttf|woff)$/,
				use: 'file-loader',
			},
		],
	},
}

module.exports = merge(commonConfig, devConfig)
